<template>
	<view class="mainCss">
		<view class="titleBox">
			<view class="titleLeft">
				<img src="../../static/title/back.png" class="titleBack" @click="goBack">
			</view>
			<view class="titleText">
				<text>租铺</text>
			</view>
			<view class="titleRight">
				
			</view>
		</view>
		<view class="selectBox">
			<view class="selectBox1">
				<view class="selectIconBox">
					<img src="../../static/home/select.png" class="selectIcon">
				</view>
				<input type="text" class="selectInput" v-model="selectInfo" placeholder="请输入搜索内容" placeholder-style="color: #DFDFDF;">
			</view>
			<view class="">
				<button class="selectButton">搜索</button>
			</view>
		</view>
		<view class="bodyBox">
			<view class="bannerBox">
				<swiper style="height: 270rpx; border-radius: 10px;" autoplay="true" interval="3000" duration="500"
					circular="true">
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<view class="swiper-item">
							<image :src="item.imgUrl" class="banner"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="typeBox">
				<view class="typeInfo" @click="shopLease">
					<img src="../../static/lease/shop.png" class="typeIcon">
					<text>商铺出租</text>
				</view>
				<view class="typeInfo" @click="shopChange">
					<img src="../../static/lease/shopchange.png" class="typeIcon">
					<text>商铺转让</text>
				</view>
				<view class="typeInfo" @click="officePersonage">
					<img src="../../static/lease/demand.png" class="typeIcon">
					<text>个人求租</text>
				</view>
				<view class="typeInfo" @click="officeLease">
					<img src="../../static/lease/office.png" class="typeIcon">
					<text>办公出租</text>
				</view>
				<view class="typeInfo" @click="officeChange">
					<img src="../../static/lease/officechange.png" class="typeIcon">
					<text>办公转让</text>
				</view>
			</view>
			<scroll-view scroll-y class="leaseList">
				<view class="forList" v-for="(item, index) in leaselise" :key="index">
					<view class="infoBox" @click="details" :data-id="item.ID">
						<view class="infoTextBox">
							<img :src="Url + item.FaceImage" class="infoImg">
							<span style="display: flex;flex-wrap: wrap; margin-left: 20rpx;">
								<text style="width: 100%; margin: 5rpx;">{{item.Address}}</text>
								<text style="width: 100%; margin: 5rpx; font-size: 12px; color: #999999;">{{item.DistinctName}}</text>
								<text style="width: 100%; margin: 5rpx; color: #FF0000;">
								{{item.TradePrice}} <text style="font-size: 14px;">元/月</text></text>
							</span>
							<text class="distance">{{item.Distance}}</text>
						</view>
						<view class="infoUserBox">
							<span style="display: flex; align-items: center;">
								<img :src="JSON.parse(item.BasicInfo).headImg" class="userHead">
								<text style="margin-left: 15rpx; color: #999999; font-size: 12px;">发布人:{{JSON.parse(item.BasicInfo).nickName}}</text>
							</span>
							<img src="../../static/lease/more.png" class="moreIcon">
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="fabu" @click="Demand">
			<img src="../../static/lease/demand.png" class="typeIcon">
			<text>房源发布</text>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				leaselise:[],
				selectInfo: '',
				openid: '',
				Url: 'https://ypsf.huashengzhuan.cn',
				id: '',
				bannerList: [{
					imgUrl: '../../static/lease/leaseBg.png',
				}, {
					imgUrl: '../../static/lease/leaseBg.png',
				}, {
					imgUrl: '../../static/lease/leaseBg.png',
				}, {
					imgUrl: '../../static/lease/leaseBg.png',
				}],
				type: 1,
				// leaseList: [{
				// 	title: '测试名称',
				// 	area: '测试区域',
				// 	money: 6000,
				// 	info: '测试简介',
				// }, {
				// 	title: '测试名称',
				// 	area: '测试区域',
				// 	money: 6000,
				// 	info: '测试简介',
				// }, {
				// 	title: '测试名称',
				// 	area: '测试区域',
				// 	money: 6000,
				// 	info: '测试简介',
				// }],
			}
		},
		onLoad() {
			
			// this.openid = uni.getStorageSync('OpenID');
			this.$myRequest({
				url: 'getCityShop',
				data: {
						CityDistinctID:app.globalData.cityDistrictID ,
						SubDistrictID: '1015',
						SupplyMode: '2',
						Page: '1',
						Limit: '5',
						ClassifyID: 2,
						TradePrice_Min: 0,
						TradePrice_Max: 5000,
						Aera_Min: '0',
						Aera_Max: '500',
						TransferFee_Min: '0',
						TransferFee_Max: '50000',
						longitude: 118.263725,
						latitude: 33.974013,
						// openid: this.openid,
					},
					dataType: 'json',
			}).then(res => {
				this.leaselise = res.data;
				console.log(this.leaselise)
			})
		},
		methods: {
			startPull(){
					uni.startPullDownRefresh({
					})
			},
			// 返回
			goBack() {
				uni.switchTab({
					url: '/pages/home/index'
				})
			},
			// 跳转商铺出租页面
			shopLease() {
				uni.navigateTo({
					url: '/pages/lease/shop'
				})
			},
			// 跳转商铺转让页面
			shopChange() {
				uni.navigateTo({
					url: '/pages/lease/shopChange'
				})
			},
			// 跳转办公楼出租页面
			officeLease() {
				uni.navigateTo({
					url: '/pages/lease/office'
				})
			},
			// 跳转办公楼转让页面
			officeChange() {
				uni.navigateTo({
					url: '/pages/lease/officeChange'
				})
			},
			// 跳转需求发布页面
			Demand() {
				uni.navigateTo({
					url: '/pages/demand/index',
				})
			},
			officePersonage() {
				uni.navigateTo({
					url: '/pagesA/personage-rent-out/personage-rent-out',
				})
			},
			// 跳转到详情页面
			details(event) {
				if ( this.id == event.currentTarget.dataset.id) {
				      return false
				    }
				console.log(event)
				this.id = event.currentTarget.dataset.id
				console.log(this.id)
				uni.navigateTo({
					url: '/pages/lease/details?id=' + JSON.stringify(event.currentTarget.dataset.id),
				})
			},
		}
	}
</script>

<style>
	@import '../../css/lease.css';
	.fabu{
		width: 150rpx;
		height: 150rpx;
		border-radius: 100%;
		position: fixed;
		bottom: 300rpx;
		right: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>